<template>
  <div class="theme flex flex-col gap-2">
    <a-card title="同步主题">
      <div class="flex gap-4">
        <div class="update-box flex-s flex-col" @click="getTheme">
          <img src="../assets/download.png" alt="" />
          <div>获取主题</div>
        </div>
        <div class="update-box flex-s flex-col" @click="updateTheme">
          <img src="../assets/upload.png" alt="" />
          上传主题
        </div>
      </div>
    </a-card>

    <StyleSection />
    <ThemeControl />
    <ThemeGlobal />
    <DesktopSetting />
  </div>
</template>

<script setup lang="ts">
import { getUserTheme, uploadUserTheme } from '@/api/modules/ax/user-assets/user.assets';
import usePageStore from '@/store/page';

import { response } from '@/utils/table/table';
import '@cyhnkckali/vue3-color-picker/dist/style.css';
import { Modal } from 'ant-design-vue';
import ThemeControl from './controls/ThemeControl.vue';
import DesktopSetting from './desktop/DesktopSetting.vue';
import ThemeGlobal from './global/ThemeGlobal.vue';

import StyleSection from './style/StyleSection.vue';

const getTheme = async () => {
  Modal.confirm({
    title: '温馨提示',
    content: '将会覆盖本地的主题',
    centered: true,
    async onOk() {
      const store = usePageStore();
      const { data } = await getUserTheme();
      if (data.data) {
        store.$state.theme = JSON.parse(data.data.data);
      }
    },
  });
};
const updateTheme = async () => {
  const store = usePageStore();
  const theme = store.$state.theme;
  response(uploadUserTheme, JSON.stringify(theme));
};
</script>

<style lang="scss" scoped>
@import 'style';
</style>
